{% extends './index.html' %}
{% block content %}

<div class="row-content am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title  am-cf">用户列表</div></div>
                <div class="widget-body  am-fr">
                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                        <div class="am-form-group">
                            <div class="am-btn-toolbar">
                                <div class="am-btn-group am-btn-group-xs">
                                    <a type="button" class="am-btn am-btn-default am-btn-success" href="{% url 'myadmin_adduser' %}">
                                        <span class="am-icon-plus"></span>新增</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <form action="{% url 'myadmin_userlist' %}">
                        <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                            <div class="am-form-group tpl-table-list-select">
                                <select name="types" data-am-selected="{btnSize: 'sm'}">
                                    <option {% if request.GET.types == 'all' %}selected {% endif %} value="all">所有类别</option>
                                    <option {% if request.GET.types == 'uid' %}selected {% endif %}value="uid">ID</option>
                                    <option {% if request.GET.types == 'uname' %}selected {% endif %} value="uname">用户名</option>
                                    <option {% if request.GET.types == 'phone' %}selected {% endif %}value="phone">电话</option>
                                </select>
                            </div>
                        </div>
                        <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
                            <div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
                                <input name="search" type="text" class="am-form-field " value="{{request.GET.search}}">
                                <span class="am-input-group-btn">
                                    <button class="am-btn  am-btn-default am-btn-success tpl-table-list-field am-icon-search" ></button>
                                </span>
                            </div>
                        </div>
                    </form>
                    <div class="am-u-sm-12">
                        <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black " >
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>头像</th>
                                    <th>用户名</th>
                                    <th>年龄</th>
                                    <th>性别</th>
                                    <th>手机号</th>
                                    <th>状态</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for i in users %}
                                <tr class="gradeX">
                                    <td>{{i.id}}</td>
                                    <td><img src="{{i.head_url}}" width="50"></td>
                                    <td>{{i.username}}</td>
                                    <td>{{i.age}}</td>
                                    {% if i.sex == "1" %}
                                    <td>男</td>
                                    {% elif i.sex == "0" %}
                                    <td>女</td>
                                    {% else %}
                                    <td>未填写</td>
                                    {% endif %}
                                    <td>{{i.phone}}</td>
                                    <td>
                                        <select  uid={{i.id}} class="status" style="color:black;background: #cfd8e4;">
                                            <option {% if i.status == 0 %} selected {% endif %} value="0">正常</option>
                                            <option {% if i.status == 1 %} selected {% endif %} value="1">禁言</option>
                                        </select>
                                    </td>
                                    <td>{{i.addtime}}</td>
                                    <td>
                                        <div class="tpl-table-black-operation">
                                            <a href="{% url 'myadmin_edituser' %}?uid={{i.id}}">
                                                <i class="am-icon-pencil"></i>编辑</a>
                                            <a href="{% url 'myadmin_deluser' %}?uid={{i.id}}" class="tpl-table-black-operation-del">
                                                <i class="am-icon-trash"></i>删除</a>
                                            <a href="javaScript:void(0)" class="tpl-table-black-operation-del changepwd" uid={{i.id}} style="color:purple;">
                                                <i ></i>密码重置</a>  
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                            <script type="text/javascript">
                                $('.changepwd').click(function(){
                                    var uid=$(this).attr("uid")
                                    console.log(uid)
                                    $.get('{% url "myadmin_repwd" %}',{uid:uid},function(data){
                                        alert(data.data)
                                    },'json')
                                })
                                $('.status').change(function(){
                                    var uid=$(this).attr("uid")
                                    var status=$(this).val()
                                    $.get('{% url "myadmin_restatus" %}',{uid:uid,status:status},function(data){
                                        console.log(data.data)
                                    },"json")
                                })

                            </script>
                        </table>
                    </div>
                    <div class="am-u-lg-12 am-cf">
                        <div class="am-fr">
                            <ul class="am-pagination tpl-pagination">
                                <li ><a href="{% url 'myadmin_userlist' %}?p=1&types={{request.GET.types}}&search={{request.GET.search}}">首页</a></li>                                
                                <li {% if page == 1 %}class="am-disabled"{% endif %} >
                                    <a href="{% url 'myadmin_userlist' %}?p={{page|add:-1}}&types={{request.GET.types}}&search={{request.GET.search}}">«</a></li>
                                {% for i in prange %}
                                <li {% if page == i %}class="am-active"{% endif %}>
                                    <a href="{% url 'myadmin_userlist' %}?p={{i}}&types={{request.GET.types}}&search={{request.GET.search}}">{{i}}</a>
                                </li>
                                {% endfor %}
                                <li {% if page == sumpage %}class="am-disabled"{% endif %}>
                                    <a href="{% url 'myadmin_userlist' %}?p={{page|add:1}}&types={{request.GET.types}}&search={{request.GET.search}}">»</a></li>
                                <li ><a href="{% url 'myadmin_userlist' %}?p={{sumpage}}&types={{request.GET.types}}&search={{request.GET.search}}">尾页</a></li>                                     
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}